<template>
	<div class="banner-content">
		<div class="banner-item p-title">
			<h3>Find the best videographers</h3>
		</div>
		<div class="banner-item p-txt">
			<p>GetCraft is a premium creative network. It’s the best place to connect with</p>
			<p>creative professionals and businesses looking for projects or work.</p>
		</div>
		<div class="banner-item p-ipt">
			<input type="text" placeholder="ie.videographers,designer,influncers etc.">
			<i class="u-svg u-svg-srch"></i>
		</div>
	</div>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped="scoped">
	@media screen and (min-width:375px) {
		.p-ipt{
			max-width: 90%;
		}
	}
	
	.banner-content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 320px;
		background: url(../assets/images/famego.jpg) center no-repeat;
		background-size: 100% 100%;
		margin-top: 84px;
	}
	.banner-item{
		margin-bottom: 20px;
		text-align: center;
	}
	.p-title h3{
		color: #fff;
		font-size: 42px;
		font-weight: bold;
	}
	.p-txt{
		color: #fff;
	}
	.p-ipt {
		width: 540px;
		height: 40px;
		background: url(../assets/images/ipt.png) repeat center;
		background-size: cover;
		padding: 0 20px;
		position: relative;
	}
	@media screen and (max-width: 375px){
		.p-ipt {
			display: block;
			width: 90%; 
		}
	}
	.p-ipt input {
		width: 100%;
		height: 40px;
		line-height: 18px;
		background: rgba(0, 0, 0, 0);
		font-size: 14px;
		color: #333;
		outline: none;
		border: none;
	}

	.u-svg-srch {
		position: absolute;
		right: 0;
		top: 10px;
		margin: 0 8px;
		vertical-align: middle;
		width: 25px;
		height: 25px;
		background-image: url();
	}
</style>
